esp@cenet — Bibliographic data 



METHOD AND SYSTEM FOR GENERATING WEB PAGE HAVING 
INFORMATION DISPLAYED IN COLOR CELL 



Page 1 of 1 



Publication number: JP2001 175691 (A) 
Publication date: 2001-06-29 



Inventor(s): 
Applicant(s): 
Classification: 



HAKMAN KEVIN 
GOODHOME COM 



G06F17/30; G06F3/033; G06F3/038; G06F3/048; G06F13/00; 
G06F15/00; G09G5/00; G09G5/34; G06F1 7/30; G06F3/033; 
G06F3/048; G06F13/00; G06F15/00; G09G5/00; G09G5/34; 
(IPC1-7): G06F17/30; G06F3/00; G06F13/00 
- European: G06F3/048A1S 
Application number: JP20000289381 20000922 

Priority number(s): US1 99901 83040P 19990922; US20000649275 20000828 



Also published as: 

| EP1 087303 (A2) 
§CA2319996 (A1) 



Abstract of JP 2001175691 (A) 
PROBLEM TO BE SOLVED: To provide a method 
and a system for displaying hierarchically related 
information. SOLUTION: A display system displays 
information relating various categories in a layer on 
a display and then the information is scrolled on the 
-display r-Wheo a use^selects displayed -information 
for a category, the display system displays 
information relating to a subcategory in the selected 
category and then the information is scrolled on the 
display. The display system scrolls the information 
cyclically so that the beginning of the information 
follows up the end of the information. Further, the 
display system dynamically generates a page 
containing the information. After a request to retrieve 
information is received to dynamically generate the 
display page, the display system retrieves 
information wherein the category and subcategory 
are described from a database. 
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1 . TltlB of tho Invention 

METHOD AND SYSTEM FOR GENERATING WEB PAGES WIT1 1 
INFORMATION DISPLAYED IN A CAROUSEL 

2 . ClBiBB 

1 . A method in a computer system for generating web pages for browsing 
through u hierarchy, the hicrorehy having category nnd sub-categories, the method 

receiving an indication of a category to display; 

retrieving information relating to the sub-categories of the indicated 

category; and 

adding to a web page information describing the retrieved information 
wherein when the web page is displayed the retrieved information is automatically scrolled 
on a display so that a user can view the retrieved information as it is scrolled. 

2. The method of claim I wherein the user can control the speed of the 

scroll. 

3. The method of claim I wherein the user can control ■!« direction of the 

scroll. 

4. The method of claim 1 including adding a speed scroll area to the web 
page llim the user can use to control the speed and direction of the scrolling. 

5. The method of claim I including sending the web page to a .client 
computer via tbo Internet. 

6. The method of claim 1 wherein the retrieved information is scrolled in a 
rotating manner. 

7. The methwl of claim 1 wherein tlte retrieved information includes 
images relating to the subcategories. 

K. lite method of claim I including retrieving information relating w items 
and adding the retrieved information to the web page, 
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o. A method in a computer system Tor displaying hierarchically related 
information, the method comprising: 

displaying information relating to 8 plurality of categories within the 
hierarchy wherein the displayed information is scrolled on a display; and 

when a category is selected, displaying information relating to a 
plurality o» sub-categoric* within the selected category wherein the displayed information is 
scrolled on the display. 

10. The method of claim 9 wherein the displaying is based on display pages 
that are dynamically generated. 

11. The method of claim 9 wherein a user can control the speed and 
direction of the scrolling using an area that is separate from the area in which the information 
is displayed. 

12. The method of claim 9 wherein the information is scrolled in a rotating 
3. Detailed Description ol the Invention 



TECHNICAL FIELD 

The present invention relates generally to displaying of information and, more 
particularly, to displaying of information within a carousel. 

BACKGROUND 

Because dte Internet facilitates electronic communications between vendors 
and purchasers, it is increasingly being used to conduct "elecnonic commerce." The Internet 
facilitates electronic commerw because it comprises a vest number of computers and 
computer networks that arc interconnected through communieaUon channels. Thus, many 
purchasers and vendors can communicate electronically using the Internet. Electronic 
commerce refers generally to commercial transactions lhat arc at lew* partially conducted 
usmg the computer systems of the parties to the transactions. For example, p purchaser can 
use a personal computer to connect via the Internet to a vendor's computer. The purchaser 
can then interact with the vendor's computer to conduct the transaction 



CO) 



#88200 1 - 1 7568 1 



The World Wide Web portion of the Internet is especially conducive to 
conducting clcctienic commerce. Many web servers have been developed thrown which 
vendors can advertise and sell products. The products can include items {e.g., music) that 
are delivered electronically to the purchaser over the Internet and items <«.jr , books) that are 
delivered through conventional distribution channels a common carrier). More 
generally, an item is any product, service 01 exchangeable entity of any type. A server 
computer system may piovidc an electronic version of a catalog Ihat lias the items that are 
available Hi be purchased. A user, who is a potential purchaser, may browse through the 
catalog using a browser and select various items that are to be purchased. When the user has 
completed selecting the items to be purchased, the server computer system Ihcn prompt* tbc 
user for inlonnniion to complete the ordering of the items, litis order information may 
include the purchaser's name, the purchaser's credit card number, and a shipping address for 
the order, The server computer system then rypiuaUy confiiinj the older by sending a 
confiimiiig web page to the client computer system and schedules shipment of the items. 

•Hie Hans within s catalog arc often organised hierarchically into categories 
and subcategories, To view information that is hierarchically organized, web pages may be 
provided for ullowing n user to browse through the hicrarehy. When browsing the hierarchy, 
n list of categories is displayed When a user selects a listed category, another web page is 
provided mat lists the sub-citcgorics within the selected category. When a us« selects a 
category that Iras no sulwatteguiies, Oien a web page with information describing the items 
within that category is provided The user can then select an item to view more detailed 
information about the item or to place an order to purchase the item For example, if the 
catalog describes electronic equipment, one category may be computers and its sub- 
categories may be personal computers, business computers, and mainfrarnc computers. The 
personal computer sub-category may include subcategories such as IBM-compatible and 
Apple. 
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When information is provided oa a web page, it is not always possible to have 
all the information visible simultaneously. For exdniple, if a category has 20 or 30 items ii 
may not be possible to display en image and a textual description of each item 
simultaneously on a display. Conventional browsers allow users to scroll through such 
information on a web page Typically, a user selects a thumb on a scroll bar to manunlly 
scroll through lite information. The use of such a scrolling technique, however, can be 
disadvantage. In particular, users may be rcluetam to spend the time to scroll through Ihc 
information on a web page. Also, novice wscrs may not know how to use tbe manual 
scrolling technique to access the nonvisible informarion. In cither case, the user would only 
view information at the beginning of the web page Thus, such users would be unlikely to 
purchase items that arc not displayed at the beginning of the web page. 

It would be desirable to have a system in which hierarchically organized data 
can be displayed iu such a way that avoids the disadvantage of having to manually scroll 
through the information relating to sub-categories and items. 

SUMMARY OP THE INVENTION 

A computer-based method and system for displaying hierarchically related 
information is provided. The display system displays on a display information related to 
various categories within the hierarchy. The displayed information scrolls across Ihc display 
so that a user need not continually interact with the computer to scroll the information 
When s user selects the displayed information for a category, the display system displays 
information relating to sub-categories within the selected category so that that information 
scrolls across the display, in one embodiment, the display system scrolls the information m a 
rotating manner such that the start or the information follows the end of the information and 
vice versa. The display system may also dynamically generate display pages («.#., web 
pages) that contain the information The display system may retrieve the information 
describing the categories and sub-categories from a database after a request to retrieve tbe 
information is received to dynamically generate the display page. In this way, the scrolled 
information need not be statically defined in a web page prior to receiving the request. The 
display system may also allow a user to control the speed and direction of scrolling. In one 
embodiment, the display system displays the information In a scroll area and provides a 
separate speed scroll urea through which n user can specify the speed and direction of the 
scrolling. The speed and direction of the scrolling may be indicated by the distance and 
direction of the cursor Com the center of Ihc speed scroll area. 
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DETAILED DESCRIPTION OF THE INVENTION 

A method and system for displaying information within a carousel is provided 
In one embodiment, the display system generates web pages for browsing through a 
hierarchy of categories. The dispioy system dynamically generates a web page when it 
receives a request for a web page relating to a selected category, hi response to receiving the 
request, the display system retrieves information relating to the sub-categories of the selected 
category. The display system then generates a web page for displaying the retrieved 
information. When the web page is displayed, the information is displayed in an automatic 
scroll area. An automatic scroll area is an area in which the information is automatically 
scrolled either horraontolly or vertically without continual interaction by a user. In one 
embodiment, the scroll area is referred to as a "carousel," because the display system scrolls 
the information in a rotating manner, that is the end of the information is followed by the 
beginning of information in a continuous loop. 

The display space system allows the user to select information being displayed 
within the scroll area. The information may be selected in various ways (e.g., mouse over or 
clicking). In one embodiment, when a user moves the cursor over information i» the scroll 
area, lire display system displays additional related iufonnation outside the scroll arm 
When the user clicks on information in the scroll area, the display system displays another 
web page relating to the selected informatioa For example, if information relating lo various 
categories is currently being displayed in the scroll area, then when the user clicks on 
information in one category, the display system dynamically generates a web page with a 
scroll area that contains information relating to die sub-categories of the selected category. 
In tiiis say, the scroll area can be used to browse through the entities (/.».. categories and 
items) of a hierarchy. The display system generates the web pages dynamically by accessing 
information describing the browse hierarchy which may be stored in a database. The 
information related to an entity may include images and textual description of the entity. 
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The display system allows a user to select the speed and direction of the 
scrolling. In one embodiment, the display system provides a speed scroll area through which 
n user can indicate the speed and direction of the scrolling. When a user selects the right half 
of the speed scroll area, the information in die scroll area scrolls to the left to browse to 
information to the right. When the user selects the left half of the speed scroll urea, die 
Information in the scroll area scrolls to right to browse to information to the left. The 
distance from the center of the speed scroll area that the user selects indicates the speed of 
the scrolling. '« particular, when the user selects a portion of the speed scroll area that is 
farthest from the center, then the scrolling is the fastest. When the user selects the center of 
the speed scroll area, the scrolling Slops. The selection of a portion of the speed scroll area 
may occur when the user positions the cursor over the speed scroll area. When a user moves 
the cursor outside of the speed scroll area, the scrolling may continue at the last designated 
speed and direction or it may slop. For example, iTa user moves the cursor from the speed 
scroll area to the scroll area, the display system may stop the scrolling to allow the user an 
opportunity to select information in the scroll area. In one embodiment, the display system 
may decelerate the scrolling when stopping, rather than immediately stopping to present a 
more visually pleasing effect. 

Figures 1-6 illustrate example weh pages generated by the display system in 
one embodiment In this example, Ihe display system allows users to browse through items 
thai are for sale in a luroiUtrc store. The items in the furniture store are hierarchically 
organised {eg., "bedrooms" and "master bedroom"). Kigure I illustrates the layout ofa web 
page that uses a carousel. Weh page 100 includes * hierarchy path area 101. scroll area 102. 
speed scroll area 103, category infonnarion area 104, sub-catcgory information area 105, and 
navigation area 106. The hierarchy path area lists the names of the categories in the path 
from the root category of the hierarchy to the currently selected category. In this example, 
lite web page is displaying information for the category "shop by lifestyle." The scroll area 
includes information relating lo the subcategories of "wasiar 107, " classic" 108, "English 
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country" 109, and "urban" 110. The information for each sob-category includes an image 
related to thai sub-catcgory. The speed scroll area, in Ibis example, is separate Item the 
scroll area. When a user positions the cursor within the speed scroll area, the speed of the 
scrolling is adjusted. When the cursor is positioned m the right half of the speed scroll area, 
then llw information in the scroll area is scrolled to the lett as a new information is displayed 
va the right. When the cursor is positioned in the left half of the speed scroll area, then the 
information in the scroll area is scrolled to the right as new information is displayed on the 
left. The distance from the center puini 1 11 of the speed scroll area indicates the speed of 
the scrolling. When the cursor is positioned at the left-most or right-most part of the scroll 
area, then scrolling »s at its highest speed. The category information area displays 
information relating to the currently selected category which in this example is the "shop by 
lifestyle" category. When the user positions the cursor over information in the scroB area, 
then the display system displays additional information related to the corresponding sub- 
category in the sub-category information area. In this example, the sub-category information 
area is displaying information relating to the "English country" sub-category. The navigation 
area allows the user to select various otto web pages such as a shopping basket web page. 

Figure 2 illustrates the scrolling of the information in a carousel of a web page. 
Web page 200 rorresponds to web page 100 with the infom»tion in its carousel scrolled to 
the left. In this example, scroll area 202 contains information relating to the sub-categories 
scrolled in from the left relative to the information in scroll area 102 of Figure I. For 
example, the information for the "urban" sub-category is shown at position 1 10 in Figure I 
and is shown moved lo die left at position 210 in Figure 2. As the information in the scroll 
area is scrolled lo the left, information for additional wo-catcgorics is displayed at the right 
In litis example, information relating to the "rustic" sub-category 211 is displayed, . Tlw 
information in the right-most area of the scroll area displays information relating lo the 
"coastal" sub-category. In Figure I, information for the "coasial" sub-category was 
displayed in the left-most portion of the scroll area. Thus, tlw displaying of the information 
relating to the "coastal" sub-category on the right of the scroll area corresponds to rotating 
scrolling, that is, the last information is followed by the first information and vice versa when 
scrolling in Ihc other direction. The information in the sub-category information area 
corresponds to the sub-category that was lastsclcctcd by the user. 
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figure 3 itlustrotcs a web page in which Ihc user has moved the cursor over 
n for a new subcategory *" «« carousel- Web page 300 contains ihc scroll aiea 
302 that corresponds to the scroll area of Figure 2. The subcategory information area 305, 
however, contains information relating to the ".usttc" subcategory, rather than the "Bnglish 
country" subcategory. When a user moves the cursor over the information 311 for the 
"tusuV subcategory, the display system displays additional information relating to that sub 
eatcgory in the subcategory information area. 

Figure 4 illustrates a web page in which a user has selected to browse down the 
hierarchy by selecting information for a subcategory in the carousel. Web page 400 
contains a scroll area 402 with information relating to sub-categories of the "English 
country" category, hi Ibis example, die subcategories of the "Bnglish country" category are 
"living room' and "bedroom." In this example, the scroll area also contains information 
relating to items within Utc 'living room" and "bedroom" sub-categories, that is, the lowest 
level categories and the items within each of those categories are displayed together within 
the carousel. Tlve information 407 relates to the "living room" subcategory. The 
information areas 40W12 contain information related to items within the "living room" sob- 
category. For example, information area 408 contains the image of a sofa mat is currently 
described m subcategory information area 405. Alihough in this cwur.pte. the display 
system is displaying information relating to a leaf subcategory along with dm items within 
that subcategory at the same time, one skilled in the art would appreciate that the leaf sub. 
categories could bo displayed by themselves in U« scroll area and the information relating to 
the items within die leaf subcategories could he display**" **cn > nc ^formation «*"i n l> ,D 
* that leaf sub-category is selected. 

Figure 5 illnstratcs a web page after a user has selected the "living room' sub- 
category. Web page 500 includes Ihc subcategory information area that contains additional 
information about the "living room" sub-category. The display system displays this 
additional information when a user moves the cursor over Ihc infornation area 507 fin the 
"living room" sub-category In the scroll area 502. 

Figure 6 illustrates a web page after a user has selected an item widtiii a sub- 
CBlegoiy. Web page 000 includes a subcategory information area 6115 that contains 
additional information about the Item described in information area 609 of the scroll area 
602. The display system displays this additional information when a user moves die cursor 
over roe informtuHin area 609. 
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Figure 7 is a block diagram illustrating components of the display system in 
otic embodiment. Hie client computers 701 and the server computer 703 are interconnected 
via the Internet 702, The computers may include a central processing unit, memory, input 
devices (e.#. keyboard and pointing device), output devices (e.g., display devices), and 
storage devices (e.g. t disk drives). The memory and storage devices are computer-readable 
media that may contain computer instructions (hat implement the display system. The client 
computers may include a browser to access web pages of the server computer via the 
Internet. The server computer implements the display system and includes a conventional 
server engine 705, a product (item) database 706, a product hierarchy 707, nnd a generate 
web pages component 708. The server engine receives requests for resources web 
pages) via the Internet and coordinates the generation and transmission of the resources. The 
generate web pages component receives requests for web pages corresponding to categories 
within the product hierarchy and generates web pages for those categories. 

One skilled in the art will appreciate the concepts or the display system can he 
used in environments other than the World Wide Web. For example, the display system can 
generate displays that use a carousel to display hierarchical information without using web 
pages by directly writing information to a display or by generating display pages (other than 
HTML-based web pages) for controlling the display of information Also, various 
communication channels, other than the Interna may be used such u> a local area network, a 
wide nrea network, or a point-to-point, dial-up connection. The server system may also 
comprise any combination of hardware or software that can support- die display system. In 
particular, the web server may actually include raohipfe computers. A client system may 
comprise any combination of hardware and software that interacts with the server system. 

Figure 8 is a block diagram illustrating a portion or an example hierarchy. 
Each entity in the hierarchy is represented by a node. In this example, the portion of die 
hicrarcliy corresponds to the sub-categories relating to a furniture store. The "furniture 
store" category is represented by node 801. The "ftimirure store" uategoiy has tlw sub- 
categories of "linglish country," "urban," "rustic," "coastal," and "classic" as represented by 
nodes 802-806. respectively, lire "tnglish country" sub-category has sub-CBtegories that 
include the "bedroom" sub-category and the "living room" sub-category as represented by 
nodes 807-808. The "living room" sub-category includes a sofa item and a box item as 
represented by lenf nodes 809-8 10. 
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Figure 9 is a black diagram illustrating Ihc contents of a node in lite example 
hierarchy. The node 901 corresponds to a category within Ac hierarchy. The node contains 
a node image 902, a node description 903, a node title 904, children background image 905, 
and a child node table 906. The display system uses the node image as the information to 
display in the scroll area tor the category or item. The display system displays the node 
description in the sub-category information area when that category is selected by moving 
the cursor over rtw mformatlon area for that category. The node title is used to display the 
name of the category. The display system may overlay of (he children background image 
over the images of Ihc sub-categories for that category. The child node table contains 
pointers to the child nodes. 

Figure 10 is a flow diagram illustrating the processing of generating a web page 
for a specific category. The function thai performs this processing is passed in the identifier 
of the category. The identifier of a category may include the name of each node within the 
hierarchy from the root node to the node representing that category. In slop 1001, ihc 
function locates the category node in Ihe product hierarchy. The- category node may be 
located try traversing rhe hierarchy starting from the root node and visiting each node 
indicated in the identifier of the passed category. In steps 1002-1005, the function loops 
retrieving information relating to a sub-category of the passed category. In step 1002, the 
function selects the next child node of the located node. In step 1003, if all the child nodes 
have already been selected, the Junction continues at step 1004, else the function continues at 
sicp 1 006. In step 1004. the function adds the link to the image of the selected child node to 
the web page. In step 1005, the function adds the description of the selected child node to 
the web page and loops to step 1002 to select the next child and loops to step 1002 to select 
the next child node. Although the description is added to the web page, it may not be visible 
until Ihe corresponding category is selected. In step 1006, the function adds the description 
of the located node to the category information area of the web page. In step 1007; the 
function adds the hierarchy path to the category to the hierarchy area of the web page. This 
step corresponds to the storing of the information in the hierarchy area of a web page. In 
step 1008, ihc function adds the speed control area to the web page. In step 1008, the 
function adds the background image of the category to its child images and then completes. 
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figure ! 1 » a flow diagram illustrating Ike processing lo advance the display 
within the scroll area. This function that implements this proce«ing executes on a client 
computer and is invoked frequently <<?.#, every 10th of a second) so that the scrolling can be 
affected with minimal flickering. In step 1 101, the function calculates the time since flic 
scroll area was last updated. In step 1 102, the function calculates the number of pixels to 
advance the images in the scroll area based on the scrolling speed in pixels per second. In 
step 1 103. flic function determines what pixffof the scroll area information Is to be displayed 
at the cciitct of the scroll area. The pixels may be numbered from the start to the end of the 
information. Since the start follows the end. the center point is the remainder of the current 
cem* plus the number of pixels to advance divided by the length of the information to be 
displayed in the carousel. In step 1 104, the function generates the cnronsel imago to be 
displayed. In step 1 105, Hie function displays the generated carousel image and completes. 

Figure 12 is a flow diagram illustrating processing for determining Ibc speed 
based on selection of the speed scroll area. In step 121)1. the Junction determines the 
distance between the position of the cursor and the center position of the speed scroll, area. 
In step 1202, the function sets the speed and direction of the scrolling. The direction is 
indicated by the sign (/.«.. positive or negative) of the speed. The function then completes. 

Prom the foregoing, it will be appreciated that although specific embodiments 
uf the purchasing system have been described for purposes of illustration, various 
modifications may be made without deviating from the spirit and the scope or the invention. 
Accordingly, Ihe invention is not limited except by the following claims. 
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Figure I illustrates the layout of b wob page thai uses a carousel. 
Figure 2 illustrates the scrolling or ihe infbimaiion in a caiowwl ora web pace 
Figure 3 illustrates a web page in which the user has moved the cursor over 
information for a new sub-category in the carousel. 

Figure 4 illustiatcs a web page in which a user has selected to browse down the 
hierarchy by selecting information for a sub-category m the carousel., 

Figure 5 illustrates a web page after a user has selected the "living room" sub- 
category. 

Figure 6 illustrates a web page after a user Has selected an item within a sub- 

category. 

Figure 7 is a block diagram illustrating components of the display system in 
one embodiment, 

F.gure 8 is a block diagram illustrating a portion of an example hierarchy. 
Figure 9 is a block diagram illustrating the contents of a node in the example 

hierarchy 

Figure 10 is a flow diagram illustrating the processing of generating a web page 
for a specific category. 

Figure 1 1 is a flow diagram illustrating the processing to advance the display 
within die scroll area. 

Figure 12 is a flow diagram illustrating processing for determining the speed 
based on selection of the speed scroll wee. 
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\ method and system for displaying hierarchically related in 
i displays mformathm related to various categories within the hierarchy on a 



display so that it scrolls across the display. When a user selects the displayed in 
Co, a ca W , * *H* *** «** »*>rmatio» relating to s^atagories within the 
jelccted category so that the information scrolls across the display. The display system 



scrolls the information in a rotating manner such that the start of the fa 
end or the information. The display system also dynamically generates display pages that 
contain the information. The display system may retrieve the information describing the 
categories and suh-catcgoriw fiora a database after u request to n 
received to dynamically generate the display page. 
2 , Representative Drawing 



FIG. 1 



